﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/include/header.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/static/h-ui/css/H-ui.min.css" />
<title>科目余额表</title>
<style>
.trHide{
	display: none;
}

.xiahuaxian{
	text-decoration: underline;
}
.bgc{
	background:#F2F4F7;
}
.m_6{
 margin-right: 6px;
}
</style>

<script type="text/javascript">
 $(function() {
	 /*$(".btnShow").click(function(event) {
	 	$(".DivToggle").toggle();
	 });*/
 }); 
 
 function goToMingXi(dicCode){
	 $.post("${ctx}/kmYuEBiao/setkmCode", {kmMingXiCode : dicCode,startTimeStr : $("#startTimeStr").val(),endTimeStr : $("#endTimeStr").val()}, function (result) {
		 if(result=="succ"){
			parent.Hui_admin_tab($(".Hui-aside a[data-title=明细账]", parent.document));
		 }
	 });
 }
</script>

</head>
<body>
	<div class="main_panel m_b20">
		<div class="ch_panel" id="queryDiv">
			<form id="objForm" action="post">
				<input type="hidden" data-qname="CSRFToken" id="CSRFToken" value="${csrfToken}" id="csrfToken" />
				<table class="c_table">
					<tr>
						<td class="t_l" style="padding-left: 10px;">
							会计期间：
							<input type="text" value="${startTimeStr }" class="date_txt" style="width: 100px;" id="startTimeStr" name="startTimeStr" data-qname="startTimeStr" onfocus="WdatePicker({minDate:'${minDate}',maxDate:'${maxDate}',dateFmt:'yyyy-MM'})" readonly="readonly" />
							至
							<input type="text" value="${endTimeStr }" class="date_txt" style="width: 100px;" id="endTimeStr" name="endTimeStr" data-qname="endTimeStr" onfocus="WdatePicker({minDate:'${minDate}',maxDate:'${maxDate}',dateFmt:'yyyy-MM'})" readonly="readonly" />
						</td>
						<td width="60%">
						</td>
						<td class="t_r">
							<input type="button" value="查询" id="searchBtn" class="c_btn" />
						</td>
					</tr>
				</table>
			</form>
		</div>
		<table class="table table-border table-bordered table-bg m_t10">
			<thead>
				<tr id="trA">
					<th class="t_c" width="15%" rowspan="2">科目编码</th>
					<th class="t_c" width="17%" rowspan="2">科目名称</th>
					<th class="t_c" colspan="2">期初余额(元)</th>
					<th class="t_c" colspan="2">本期发生额(元)</th>
					<th class="t_c" colspan="2">本年累计发生额(元)</th>
					<th class="t_c" colspan="2">期末余额(元)</th>
				</tr>
				<tr id="trB">
					<th class="t_c" width="9%">借方</th>
					<th class="t_c" width="9%">贷方</th>
					<th class="t_c" width="8%">借方</th>
					<th class="t_c" width="8%">贷方</th>
					<th class="t_c" width="8%">借方</th>
					<th class="t_c" width="8%">贷方</th>
					<th class="t_c" width="9%">借方</th>
					<th class="t_c" width="9%">贷方</th>
				</tr>
			</thead>
		</table>
		<div style="height: 77%;overflow: auto; border-bottom: 1px solid #ccc; background: #fff;">
			<table id="tbwrap" class="table table-border table-bordered table-bg"></table>
			<div />
		</div>

		<script type="text/html" id="tb_template">
		<tbody data-type="body" id="tbodyB">
			<!if(list.length>0) { !>
				<!for(var i=0,len=list.length;i<len;i++){
					var item = list[i],index = i+1,classItem = "trHide";
				!>
				<!if(item["levelNum"]=='1') { !>
					<tr class="<!=item["parentDicCode"]!>" dicCode="<!=item["dicCode"]!>">
				<!}else{!>
					<tr class="<!=classItem!> <!=item["parentDicCode"]!>" dicCode="<!=item["dicCode"]!>">
				<!}!>

					<!if(item["levelNum"]=='2') { !>
						<td align="left" style="padding-left: 20px;">
					<!}else if(item["levelNum"]=='3') {!>
						<td align="left" style="padding-left: 40px;">
					<!}else if(item["levelNum"]=='4') {!>
						<td align="left" style="padding-left: 60px;">
					<!}else{!>
						<td align="left">
					<!}!>
						<a class="btnShow off" id="<!=item["dicCode"]!>">>></a>&nbsp;&nbsp;<a onclick="goToMingXi('<!=item['dicCode']!>')" style="color: #333;"><!=item["dicCode"]!></a>
					</td>

					<!if(item["levelNum"]=='2') { !>
						<td align="left" style="padding-left: 20px;">
					<!}else if(item["levelNum"]=='3') {!>
						<td align="left" style="padding-left: 40px;">
					<!}else if(item["levelNum"]=='4') {!>
						<td align="left" style="padding-left: 60px;">
					<!}else{!>
						<td align="left">
					<!}!>
						<!=item["dicName"]!>
					</td>

					<td class="t_r"><!=item["qiChuValueJie"]!></td>
					<td class="t_r"><!=item["qiChuValueDai"]!></td>
					<td class="t_r"><!=item["bqfsValueJie"]!></td>
					<td class="t_r"><!=item["bqfsValueDai"]!></td>
					<td class="t_r"><!=item["bnljValueJie"]!></td>
					<td class="t_r"><!=item["bnljValueDai"]!></td>
					<td class="t_r"><!=item["qiMoValueJie"]!></td>
					<td class="t_r"><!=item["qiMoValueDai"]!></td>

				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="10"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</script>

		<script type="text/javascript">
			$(function () {

				//ajax请求添加等待图片
				$(document).ajaxStart(function () {
					ZENG.msgbox.show(" 正在加载中，请稍后...", 6, 8000);
				});

				$(document).ajaxComplete(function () {
					ZENG.msgbox.hide();
				});

				// 5、查询
				$("#searchBtn").click(function () {
					search();
				});

				// 页面加载完成调用查询分页
				search();
			});
		</script>

		<script type="text/javascript">
			function search () {
				seajs.use([ "component/table" ], function (uiTable) {
					var serializedForm = $("#objForm").serialize()
					$.post("${ctx}/kmYuEBiao/ajaxList", serializedForm, function (result) {

						if (result.msg=="succ") {//请求成功
							var table = new uiTable({
								"con" : "#tbwrap", "data" : {
									"list" : result.dataList
								}, "template" : "tb_template"
							});
						
							$("#startTimeStr").val(result.startTimeStr);
							$("#endTimeStr").val(result.endTimeStr);
						}else{//请求失败
							alert(result.msg);
							return;
						}

						$($($("#tbodyB tr").get(0)).find("td").get(0)).width($($("#trA th").get(0)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(1)).width($($("#trA th").get(1)).width());
						
						$($($("#tbodyB tr").get(0)).find("td").get(2)).width($($("#trB th").get(0)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(3)).width($($("#trB th").get(1)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(4)).width($($("#trB th").get(2)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(5)).width($($("#trB th").get(3)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(6)).width($($("#trB th").get(4)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(7)).width($($("#trB th").get(5)).width());
						$($($("#tbodyB tr").get(0)).find("td").get(8)).width($($("#trB th").get(6)).width());
						//$($($("#tbodyB tr").get(0)).find("td").get(9)).width($($("#trB th").get(7)).width());
						
						$("#tbwrap tr").hover(
           				  function () {
           					$(this).addClass("bgc");
           					$("a[dataCode='"+$(this).attr("dicCode")+"']").addClass("xiahuaxian");
           				  },
           				  function () {
           					$(this).removeClass("bgc");
           					$("a[dataCode='"+$(this).attr("dicCode")+"']").removeClass("xiahuaxian");
           				  }
           				);
						
						 $(".btnShow").click(function(event) {
							 if($(this).hasClass("off")){
								 $(this).text("▼");
								 $(this).removeClass("off");
								 $(this).addClass("on");
								 $(this).addClass("m_6");
								 
								 $("."+$(this).attr("id")).show();
							 }else{
								 //递归关闭所有已经打开了的子类
								 if($(this).attr("id")==""){
									 $(this).text(">>");
									 $(this).removeClass("on");
									 $(this).removeClass("m_6");
									 $(this).addClass("off");
								 }else{
								 	diguiHide($(this).attr("id"));
								 }
							 }
							
						 });
					});
				});
			}
			
			function diguiHide(dicCode){
				
				$("#"+dicCode).text(">>");
				$("#"+dicCode).removeClass("on");
				$("#"+dicCode).removeClass("m_6");
				$("#"+dicCode).addClass("off");
				
				$.each( $("."+dicCode), function(i, tr){
					$(tr).hide();
					diguiHide($(tr).attr("dicCode"));
				});
			}
		</script>
</body>
</html>